/* ======================================= */
/* MIJNENVEGER - MODERN UNIFIED            */
/* ======================================= */

/* ===== COLOR DEFINITIONS ===== */
/* Dark mode is default, light mode overrides via :root.light-mode */

.minesweeper-card {
  /* Dark mode colors */
  --ms-bg-card: var(--secondary-bg, #14181f);
  --ms-bg-card-gradient: linear-gradient(
    145deg,
    var(--ms-bg-card) 0%,
    rgba(255, 255, 255, 0.03) 100%
  );

  --ms-bg-panel: var(--overlay-dark, rgba(255, 255, 255, 0.04));
  --ms-bg-panel-2: var(--overlay-medium, rgba(255, 255, 255, 0.06));

  /* Force visible borders in dark mode */
  --ms-border: rgba(255, 255, 255, 0.14);
  --ms-border-strong: rgba(255, 255, 255, 0.18);

  --ms-text: var(--text-primary, #e5e7eb);
  --ms-text-secondary: var(--text-secondary, #9ca3af);
  --ms-text-muted: var(--text-muted, #9ca3af);

  /* Accent */
  --ms-accent: var(--link-color, #58a6ff);

  /* Cells */
  --ms-cell-bg: rgba(255, 255, 255, 0.06);
  --ms-cell-hover: rgba(255, 255, 255, 0.1);
  --ms-cell-revealed: rgba(255, 255, 255, 0.03);
  --ms-cell-revealed-border: rgba(255, 255, 255, 0.08);

  --ms-cell-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.14),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35);

  /* Special states */
  --ms-mine-bg: #e11d48;
  --ms-flag-bg: rgba(88, 166, 255, 0.14);

  /* Feedback */
  --ms-feedback-bg: #ffffff;
  --ms-feedback-text: #111827;

  /* Game container */
  --ms-game-bg: rgba(0, 0, 0, 0.35);
  --ms-game-border: rgba(255, 255, 255, 0.14);

  /* Number colors (1-8) */
  --ms-n1: #3b82f6;
  --ms-n2: #10b981;
  --ms-n3: #ef4444;
  --ms-n4: #a855f7;
  --ms-n5: #f97316;
  --ms-n6: #14b8a6;
  --ms-n7: #e5e7eb;
  --ms-n8: #94a3b8;
}

/* Light mode overrides */
:root.light-mode .minesweeper-card {
  --ms-bg-card: #ffffff;
  --ms-bg-card-gradient: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);

  --ms-bg-panel: #f9fafb;
  --ms-bg-panel-2: #ffffff;

  --ms-border: #d0d7de;
  --ms-border-strong: #cbd5e1;

  --ms-text: #24292f;
  --ms-text-secondary: #57606a;
  --ms-text-muted: #6b7280;

  --ms-accent: #0969da;

  --ms-cell-bg: #eef2f7;
  --ms-cell-hover: #e5e7eb;
  --ms-cell-revealed: #ffffff;
  --ms-cell-revealed-border: #e5e7eb;

  --ms-cell-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85),
    inset -1px -1px 0 rgba(0, 0, 0, 0.08);

  --ms-mine-bg: #e11d48;
  --ms-flag-bg: rgba(9, 105, 218, 0.12);

  --ms-feedback-bg: #111827;
  --ms-feedback-text: #ffffff;

  --ms-game-bg: #ffffff;
  --ms-game-border: #d0d7de;
}

/* ===== CARD ===== */
.minesweeper-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 15px;
  background: var(--ms-bg-card-gradient);
  border-radius: 15px;
  color: var(--ms-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid var(--ms-border);
}

.ms-header h1 {
  text-align: center;
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  color: var(--ms-text);
}

/* ===== DIFFICULTY ===== */
.ms-difficulty-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  background: var(--ms-bg-panel);
  padding: 8px;
  border-radius: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--ms-border);
}

.ms-diff-btn {
  background: var(--ms-bg-panel-2);
  border: 1px solid var(--ms-border-strong);
  color: var(--ms-text);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  flex: 1;
  min-width: 45px;
  transition: transform 0.15s ease, border-color 0.15s ease,
    background 0.15s ease;
}

.ms-diff-btn:hover {
  border-color: var(--ms-accent);
  transform: translateY(-1px);
}

.ms-diff-btn.active {
  background: var(--ms-accent);
  border-color: var(--ms-accent);
  color: #ffffff;
  font-weight: 800;
}

.ms-diff-label {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--ms-accent);
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin-top: 5px;
  letter-spacing: 0.08em;
}

/* ===== CONTROLS ===== */
.ms-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.ms-btn-primary {
  background: var(--ms-accent);
  border: 1px solid var(--ms-accent);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.ms-btn-primary:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

.ms-stats {
  display: flex;
  gap: 8px;
}

.ms-stat {
  background: var(--ms-bg-panel);
  padding: 6px 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid var(--ms-border-strong);
  min-width: 65px;
}

.ms-stat-label {
  display: block;
  font-size: 0.6rem;
  color: var(--ms-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ms-stat-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ms-text);
}

/* ===== GAME CONTAINER ===== */
.ms-game-container {
  position: relative;
  background: var(--ms-game-bg);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--ms-game-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
}

.ms-grid {
  display: grid;
  gap: 2px;
  margin: 0 auto;
  width: max-content;
}

/* ===== CELL ===== */
.ms-cell {
  background: var(--ms-cell-bg);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  box-shadow: var(--ms-cell-shadow);
  border: 1px solid transparent;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;

  transition: background 0.12s ease, transform 0.08s ease,
    border-color 0.12s ease;
}

.ms-cell:hover {
  background: var(--ms-cell-hover);
  border-color: var(--ms-border);
}

.ms-cell:active {
  transform: scale(0.98);
}

.ms-cell.revealed {
  background: var(--ms-cell-revealed);
  box-shadow: none;
  border: 1px solid var(--ms-cell-revealed-border);
  cursor: default;
}

.ms-cell.flagged {
  background: var(--ms-flag-bg);
  border-color: var(--ms-accent);
}

.ms-cell.mine {
  background: var(--ms-mine-bg) !important;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}

/* Numbers 1-8 */
.ms-cell[data-value="1"] {
  color: var(--ms-n1);
}
.ms-cell[data-value="2"] {
  color: var(--ms-n2);
}
.ms-cell[data-value="3"] {
  color: var(--ms-n3);
}
.ms-cell[data-value="4"] {
  color: var(--ms-n4);
}
.ms-cell[data-value="5"] {
  color: var(--ms-n5);
}
.ms-cell[data-value="6"] {
  color: var(--ms-n6);
}
.ms-cell[data-value="7"] {
  color: var(--ms-n7);
}
.ms-cell[data-value="8"] {
  color: var(--ms-n8);
}

/* ===== FEEDBACK ===== */
.ms-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: var(--ms-feedback-bg);
  color: var(--ms-feedback-text);
  padding: 15px 30px;
  border-radius: 12px;
  z-index: 100;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  border: 1px solid var(--ms-border);
}

.ms-feedback.visible {
  transform: translate(-50%, -50%) scale(1);
}

.ms-feedback.win {
  border-color: var(--ms-accent);
}

/* ===== HINTS ===== */
.ms-hint {
  font-size: 0.75rem;
  color: var(--ms-text-muted);
  text-align: center;
  margin-top: 15px;
}

.ms-hint-mobile {
  display: none;
}

@media (max-width: 768px) {
  .ms-cell {
    width: clamp(32px, 7vw, 42px);
    height: clamp(32px, 7vw, 42px);
    font-size: 1.1rem;
  }

  .ms-game-container {
    justify-content: flex-start;
  }

  .ms-hint-desktop {
    display: none;
  }
  .ms-hint-mobile {
    display: block;
  }
}